<!DOCTYPE html>
<html>
<head>
	<title>修改密码</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/user.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
</head>
<body class="body_bg password_body">
<div id="app" v-cloak>
	<div class="disFlex status_box ">
		<div>
			<img :src="status1==2?'img/img_status2.png':(status1==1?'img/img_status3.png':'img/img_status1.png')" class="icon_status " alt="">
			<p>验证手机账号</p>
		</div>
		<div>
			<img :src="status2==2?'img/img_status2.png':(status2==1?'img/img_status3.png':'img/img_status1.png')" class="icon_status" alt="">
			<p>输入新密码</p>
		</div>
		<div>
			<img :src="status3==2?'img/img_status2.png':status3==1?'img/img_status3.png':'img/img_status1.png'" class="icon_status" alt="">
			<p>修改完成</p>
		</div>
	</div>
	<div v-show="step==1">
		<div class="box_shadow verify">
			<ul class="code_input">
				<li>
					<label for="mobile" class="justify">手&emsp;机&emsp;号</label>
					<input type="text" placeholder="填写手机号" id="mobile">
				</li>
				<li>
					<label for="code">验&emsp;证&emsp;码</label>
					<div class="code_box">
						<input type="text" placeholder="填写验证码" id="code">
						<span class="code_btn">获取验证码</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="btn_box">
			<div class="btn" @click="passwordStep1">下一步</div>
			<div class="btn cancel" @click="passwordCancel">取消修改</div>
		</div>
	</div>
	<div v-show="step==2">
		<div class="box_shadow verify verify_two">
			<ul class="code_input">
				<li>
					<label for="pwdOld" class="justify">输入密码</label>
					<div class="code_box">
						<input :type="pwdOldIf?password:text" placeholder="请输入新密码" id="pwdOld">
						<img :src="pwdOldIf?'img/eye_x.png':'img/eye.png'" :class="{icon_eye:true,close:pwdOldIf}" @click="pwdOldIf=!pwdOldIf" alt="">
					</div>

				</li>
				<li>
					<label for="pwdOld2">确认密码</label>
					<div class="code_box">
						<input :type="pwdOld2If?password:text" placeholder="请输入新密码" id="pwdOld2">
						<img :src="pwdOld2If?'img/eye_x.png':'img/eye.png'" :class="{icon_eye:true,close:pwdOld2If}" @click="pwdOld2If=!pwdOld2If" alt="">
					</div>
				</li>
			</ul>
		</div>
		<div class="btn_box">
			<div class="btn" @click="passwordStep2">下一步</div>
			<div class="btn cancel" @click="passwordCancel">取消修改</div>
		</div>
	</div>
	<div v-show="step==3">
		<div class="box_shadow verify tips">
		你的登陆密码已经修改完成了哦~
		</div>
		<div class="btn_box">
			<div class="btn" @click="passwordCancel">完成</div>
		</div>
	</div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
	    text:'text',
		password:'password',
		pwdOldIf:true,
        pwdOld2If:true,

	    status1:2,
		status2:1,
		status3:1,
		step:1,
	},
	methods:{
        passwordCancel:function () {
			location.href="user.html";
        },
        passwordStep1:function () {
            this.status1=3;
			this.status2=2;
			this.step=2;
        },
        passwordStep2:function () {
			this.status2=3;
			this.status3=2;
			this.step=3;
        }
	},
	created:function(){},
	mounted:function(){}
})	

</script>
</body>
</html>